import { FC, useState } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import "./index.scss"

interface IPromotion {}

const Promotion: FC<IPromotion> = (props) => {

    const { t } = useTranslation()
    const [ game ] = useState([
        {
            invite: '2',
            economy: '100 SHUI',
            rewards: '',
        },
        {
            invite: '5',
            economy: '500 SHUI',
            rewards: '',
        },
        {
            invite: '10',
            economy: '1,000 SHUI',
            rewards: '',
        },
    ])

	return (
		<div id="promotion">
            <div className="promotion-title">
                <p>
                    Pro
                    <span className="promotion-title-mo">mo</span>
                    tion acti
                    <span className="promotion-title-vi">vi</span>
                    ties
                </p>
            </div>
            <div className="promotion-invited">
                {t('task.invited')}
                <span className="promotion-invited-num">0</span>
                {t('task.people')}
            </div>
            <p className="promotion-text">{t('task.invite1')}</p>
            <p className="promotion-text">{t('task.invite2')}</p>
            <div className="promotion-input flex">
                <input type="text" placeholder={`${t('task.input')}`}  />
            </div>
            <div className="promotion-invited-btn">{t('task.invite')}</div>
            <div className="promotion-table table">
                <div className="row head">
                    <div className="cell first">{t('task.title1')}</div>
                    <div className="cell">{t('task.title2')}</div>
                    <div className="cell">{t('task.title3')}</div>
                </div>
                {
                    game.map((item, index) => (
                        <div className="row td-content" key={index}>
                            <div className="cell invite">{item.invite}</div>
                            <div className="cell">{item.economy}</div>
                            <div className="cell">{item.rewards}</div>
                        </div>
                    ))
                }
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(Promotion)